<template>
  <div class="phone-login">
    <div class="login-form">
      <!-- 手机号输入 -->
      <van-field
        v-model="phone"
        label="手机号"
        placeholder="请输入手机号"
        type="tel"
        maxlength="11"
        :rules="phoneRules"
        clearable
      />
      
      <!-- 验证码输入 -->
      <van-field
        v-model="code"
        label="验证码"
        placeholder="请输入验证码"
        type="number"
        maxlength="6"
        :rules="codeRules"
        clearable
      >
        <template #button>
          <van-button
            size="small"
            type="primary"
            :loading="sendingCode"
            :disabled="!canSendCode"
            @click="handleSendCode"
          >
            {{ countdown > 0 ? `${countdown}s` : '发送验证码' }}
          </van-button>
        </template>
      </van-field>
      
      <!-- 登录按钮 -->
      <div class="login-actions">
        <van-button
          type="primary"
          size="large"
          :loading="loading"
          :disabled="!canLogin"
          @click="handleLogin"
        >
          {{ loading ? '登录中...' : '登录' }}
        </van-button>
      </div>
      
      <!-- 提示信息 -->
      <div class="login-tips">
        <p>• 验证码默认：111111</p>
        <p>• 手机号格式：11位数字</p>
        <p>• 验证码有效期：5分钟</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onUnmounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { showToast } from 'vant'

interface Emits {
  (e: 'success'): void
  (e: 'error', message: string): void
}

const emit = defineEmits<Emits>()

const authStore = useAuthStore()

// 表单数据
const phone = ref('')
const code = ref('')
const loading = ref(false)
const sendingCode = ref(false)
const countdown = ref(0)

// 验证规则
const phoneRules = [
  { required: true, message: '请输入手机号' },
  { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
]

const codeRules = [
  { required: true, message: '请输入验证码' },
  { pattern: /^\d{6}$/, message: '验证码为6位数字' }
]

// 手机号验证函数
const validatePhone = (phone: string): boolean => {
  return /^1[3-9]\d{9}$/.test(phone)
}

// 计算属性
const canSendCode = computed(() => {
  return validatePhone(phone.value) && countdown.value === 0 && !sendingCode.value
})

const canLogin = computed(() => {
  return validatePhone(phone.value) && code.value.length === 6 && !loading.value
})

// 发送验证码
const handleSendCode = async () => {
  if (!canSendCode.value) return
  
  sendingCode.value = true
  
  try {
    await authStore.sendVerificationCode(phone.value)
    showToast('验证码发送成功')
    
    // 开始倒计时
    countdown.value = 60
    const timer = setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) {
        clearInterval(timer)
      }
    }, 1000)
    
  } catch (error: any) {
    showToast(error.message || '发送验证码失败')
  } finally {
    sendingCode.value = false
  }
}

// 登录
const handleLogin = async () => {
  if (!canLogin.value) return
  
  loading.value = true
  
  try {
    const success = await authStore.phoneLogin(phone.value, code.value)
    
    if (success) {
      showToast('登录成功')
      emit('success')
    } else {
      showToast('登录失败，请重试')
    }
  } catch (error: any) {
    showToast(error.message || '登录失败')
    emit('error', error.message || '登录失败')
  } finally {
    loading.value = false
  }
}

// 组件卸载时清理定时器
onUnmounted(() => {
  countdown.value = 0
})
</script>

<style scoped>
.phone-login {
  padding: 20px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-actions {
  margin-top: 20px;
}

.login-tips {
  margin-top: 16px;
  padding: 12px;
  background-color: #f7f8fa;
  border-radius: 8px;
  font-size: 12px;
  color: #666;
}

.login-tips p {
  margin: 4px 0;
}
</style> 